<!-- 通用形配置 -->
<template>
  <div>
    <el-form-item label="边框类型">
      <avue-select v-model="main.activeOption.is" :dic="borderList" @change="changeType"></avue-select>
    </el-form-item>
    <!-- 颜色设置 -->
    <el-form-item label="边框主颜色">
      <avue-input-color placeholder="请选择颜色" v-model="main.activeOption.color[0]">
      </avue-input-color>
    </el-form-item>
    <el-form-item label="边框副颜色">
      <avue-input-color placeholder="请选择颜色" v-model="main.activeOption.color[1]"></avue-input-color>
    </el-form-item>
    <el-form-item label="背景色">
      <avue-input-color placeholder="请选择颜色" v-model="main.activeOption.backgroundColor"></avue-input-color>
    </el-form-item>

    <el-form-item label="翻转"  v-if="hasReverse">
      <avue-switch v-model="main.activeOption.reverse"></avue-switch>
    </el-form-item>
    <el-form-item label="动画时长(毫秒)" v-if="main.activeOption.is === 'dv-border-box-8'">
      <avue-input-number v-model="main.activeOption.dur"></avue-input-number>
    </el-form-item>
    <!-- 提示语设置  -->
    <template v-if="main.activeOption.is === 'dv-border-box-11'">
      <el-form-item label="边框标题">
        <avue-input v-model="main.activeOption.title"></avue-input>
      </el-form-item>
      <el-form-item label="标题宽度">
        <avue-input-number v-model="main.activeOption.titleWidth"></avue-input-number>
      </el-form-item>
    </template>
  </div>
</template>

<script>

export default {
  inject: ["main"],
  data() {
    return {
      borderList: [
        {label: '边框1', value: 'dv-border-box-1'},
        {label: '边框2', value: 'dv-border-box-2'},
        {label: '边框3', value: 'dv-border-box-3'},
        {label: '边框4', value: 'dv-border-box-4'},
        {label: '边框5', value: 'dv-border-box-5'},
        {label: '边框6', value: 'dv-border-box-6'},
        {label: '边框7', value: 'dv-border-box-7'},
        {label: '边框8', value: 'dv-border-box-8'},
        {label: '边框9', value: 'dv-border-box-9'},
        {label: '边框10', value: 'dv-border-box-10'},
        {label: '边框11', value: 'dv-border-box-11'},
        {label: '边框12', value: 'dv-border-box-12'},
        {label: '边框13', value: 'dv-border-box-13'},
      ],
    }
  },
  methods: {
    changeType(type) {
      this.main.activeObj.name = this.borderMap[type]
    }
  },
  computed: {
    hasReverse(){
      return this.main.activeOption.is === "dv-border-box-4" || this.main.activeOption.is === "dv-border-box-5" || this.main.activeOption.is === "dv-border-box-8"
    },
    borderMap(){
      let map ={}
      for( const border of this.borderList){
        map[border.value] = border.label
      }
      return map
    }
  }
}
</script>

<style>
</style>